<template>
  <h1>Hello Vue3</h1>
  <h2>{{ number }}</h2>
  <h2>{{ msg }}</h2>
</template>

<script>
/* 
  目标：书写 setup 的注意事项

  setup 小结
    1. setup 会自动执行，比 beforeCreate 执行时机还早，组件还没创建，this 的值为 undefined
    2. setup 内部 return 返回的数据可以在 <template> 模板中使用

  💥 常见错误：
    1. setup 内部用到了 this，原因请看小结1
*/
export default {
  name: 'App',
  // Vue2生命周期钩子：4 阶段 -> 创建阶段, 挂载阶段, 更新阶段, 销毁(卸载)阶段
  // setup 是在哪个阶段运行的
  // 🔔 setup 在组件 beforeCreate 前就自动运行了，早于 Vue2 所有的生命周期钩子
  setup() {
    console.log(111, 'setup')
    // 🎃由于 setup 在组件创建前就执行了，所以在这里访问不到组件实例
    console.log(this) // undefined
    //🔔 setup 返回的数据可以在 <template> 模板中直接使用
    return { number: 0, msg: '你好' }
  },
  // 🎃选项式API - 在Vue3项目中最好不要使用了(支持但不推荐)
  beforeCreate() {
    console.log(222, 'beforeCreate')
    console.log(this) // 组件实例
  },
}
</script>

<style></style>
